<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="shopping">
  <meta name="description" content="shopping">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title>shopping</title>
  <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
  <script src="js/security.js"></script>
  <link rel="stylesheet" href="./css/goodsList.css">
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_745333_g55zsfjlolf.css">
</head>

<body>
  <!-- 公共头部 -->
  <div class="contentHead">
    <div class="head">
      <div class="iconfont">
        <a href="#" class="icon pd-x_user"></a>
        <a href="#" class="icon pd-x_qrcode"></a>
        <a href="#" class="icon pd-x_phone"></a>
        <a href="#" class="icon pd-x_help"></a>
      </div>
      <div class="tel">
        <span class="icon pd-x_service"></span>
        <span class="server">服务热线</span>
        <span class="phone">400-1234-5678</span>
      </div>
    </div>
  </div>
  <!-- 头部搜索 -->
  <div class="search">
    <div class="logo">
      <img src="./images/logarea.png" alt="">
    </div>
    <div class="searchinfo">
      <div class="searchbox">
        <p>全部分类</p>
        <div class="line"></div>
        <input type="text" name="" id="" placeholder="搜索商品">
        <div class="right">
          <span class="icon pd-search_line"></span>
          <span class="sousuo">搜索</span>
        </div>
      </div>
    </div>
    <div class="myshop">
      <div class="bg">
        <span class="icon pd-x_cart"></span>
      </div>
      <div class="my">
        <p class="shop">我的购物车
          <span class="icon pd-baseicons82"></span>
        </p>
        <p class="pirce">￥ 0.00</p>
      </div>
    </div>
  </div>
  <!-- nav -->
  <div class="navT">
    <div class="nav">
      <img src="./images/nav1.png" alt="">
      <div class="navAll">
        <a href="#" style="padding-left: 72px" class="active">首页</a>
        <a href="#">限时秒杀</a>
        <a href="#">商品促销</a>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
      </div>
    </div>
  </div>

  <!-- 内容 -->
  <div class="content">
    <div class="goodsCont">
      <div class="left">
        <div class="title">
          <p>新品推荐</p>
          <p>销量排行榜</p>
        </div>
        <div class="item">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0"> 绿联（UGREEN）USB3.0分线器 高速4口HUB 多接口扩展转换器 高速4口HUB 多接口扩展转换器 高速4口HUB 多接口扩展转换器</a>
          </div>
          <div class="price">
            <p class="color">￥58.00</p>
            <p class="how">销售量：
              <span>123</span>
            </p>
          </div>
        </div>
        <div class="item">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0"> 绿联（UGREEN）USB3.0分线器 高速4口HUB 多接口扩展转换器 高速4口HUB 多接口扩展转换器 高速4口HUB 多接口扩展转换器</a>
          </div>
          <div class="price">
            <p class="color">￥58.00</p>
            <p class="how">销售量：
              <span>123</span>
            </p>
          </div>
        </div>
        <div class="item">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0"> 绿联（UGREEN）USB3.0分线器 高速4口HUB 多接口扩展转换器 高速4口HUB 多接口扩展转换器 高速4口HUB 多接口扩展转换器</a>
          </div>
          <div class="price">
            <p class="color">￥58.00</p>
            <p class="how">销售量：
              <span>123</span>
            </p>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">
          <div class="active">综合</div>
          <div>销售量
            <span class="icon pd-down"></span>
          </div>
          <div>新品
            <span class="icon pd-down"></span>
          </div>
          <div>价格
            <span class="icon pd-down"></span>
          </div>
        </div>
        <div class="choose">
          <div class="chooseLeft">
            <span>配送至</span>
            <span>重庆市重庆市重庆市</span>
            <input type="checkbox" name="" id="">包邮
            <input type="checkbox" name="" id="">仅显示有货
          </div>
          <div class="chooseRight">
            <span>商品所在地</span>
            <span>重庆市重庆市重庆市</span>
            <span class="icon pd-x_sort" title="大图模式"></span>
            <span class="icon pd-open" title="列表模式"></span>
          </div>
        </div>
        <!-- 大图模式 -->
        <div class="rightCont">
          <div class="items">
            <img src="./images/dddd.jpg" alt="">
            <p class="price">￥0.00</p>
            <a href="">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
            <p class="join">
              <span class="icon pd-cart_solid"></span>加入购物车</p>
            <p class="shoucang">
              <span class="icon pd-star_line"></span>收藏</p>
          </div>
          <div class="items">
            <img src="./images/dddd.jpg" alt="">
            <p class="price">￥0.00</p>
            <a href="">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
            <p class="join">
              <span class="icon pd-cart_solid"></span>加入购物车</p>
            <p class="shoucang">
              <span class="icon pd-star_line"></span>收藏</p>
          </div>
          <div class="items">
            <img src="./images/dddd.jpg" alt="">
            <p class="price">￥0.00</p>
            <a href="">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
            <p class="join">
              <span class="icon pd-cart_solid"></span>加入购物车</p>
            <p class="shoucang">
              <span class="icon pd-star_line"></span>收藏</p>
          </div>
          <div class="items">
            <img src="./images/dddd.jpg" alt="">
            <p class="price">￥0.00</p>
            <a href="">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
            <p class="join">
              <span class="icon pd-cart_solid"></span>加入购物车</p>
            <p class="shoucang">
              <span class="icon pd-star_line"></span>收藏</p>
          </div>
        </div>
        <!-- 列表模式 -->
        <div class="contList" style="display: none;">
          <div class="items">
            <img src="./images/dddd.jpg" alt="">
            <p class="name">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</p>
            <div class="price">
              <p>市场价：
                <span>￥91999.00</span>
              </p>
              <p>本店售价：
                <span>￥0.00</span>
              </p>
            </div>
            <div class="caozuo">
              <span class="shou">收藏</span>
              <span class="jia">加入购物车</span>
            </div>
          </div>
          <div class="items">
              <img src="./images/dddd.jpg" alt="">
              <p class="name">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</p>
              <div class="price">
                <p>市场价：
                  <span>￥91999.00</span>
                </p>
                <p>本店售价：
                  <span>￥0.00</span>
                </p>
              </div>
              <div class="caozuo">
                <span class="shou">收藏</span>
                <span class="jia">加入购物车</span>
              </div>
            </div>
        </div>
        <!-- 翻页区 -->
        <div class="changepage">
          <a href="#">首页</a>
          <a href="#">上一页</a>
          <ul class="changepage-info">
            <li class="active">
              <a href="#">1</a>
            </li>
          </ul>
          <a href="#">下一页</a>
          <a href="#">尾页</a>
        </div>
      </div>
    </div>
    <div class="like">
      <div class="top">
        <div class="nav">
          <span class="cai active">猜您喜欢</span>
          <span class="history">浏览历史</span>
        </div>
        <div class="clear">
          <p>
            <span class="icon pd-trashcan_solid"></span>清空</p>
        </div>
      </div>
      <!-- 猜您喜欢 -->
      <ul class="all likeCont">
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥0.00</p>
        </li>
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥0.00</p>
        </li>
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥0.00</p>
        </li>
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥0.00</p>
        </li>
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥0.00</p>
        </li>
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥0.00</p>
        </li>
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥0.00</p>
        </li>
      </ul>
      <!-- 浏览历史 -->
      <ul class="all historyCont" style="display: none">
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥1.00</p>
        </li>
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥0.00</p>
        </li>
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥1.00</p>
        </li>
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥1.00</p>
        </li>
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥0.00</p>
        </li>
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥0.00</p>
        </li>
        <li class="likeItems">
          <img src="./images/dddd.jpg" alt="">
          <div class="name">
            <a href="#0">积分限购版——联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
          </div>
          <p class="price">￥0.00</p>
        </li>
      </ul>
    </div>
  </div>
  </div>

  <!-- 正品保障 -->
  <div class="real">
    <div class="realThing">
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
    </div>
  </div>
  <!-- 公共底部 -->
  <div class="footer">
    <div class="footerTop">
      <div>
        <img src="./images/LOGO.png" alt="">
      </div>
      <div class="">
        <dl>
          <dt>配送与支付</dt>
          <dd>货到付款区域</dd>
          <dd>配送支付智能查询</dd>
          <dd>支付方式说明</dd>
        </dl>
      </div>
      <div class="">
        <dl>
          <dt>服务保证</dt>
          <dd>退换货原则</dd>
          <dd>售后服务保证</dd>
          <dd>产品质量保证</dd>
        </dl>
      </div>
      <div class="">
        <dl>
          <dt>联系我们</dt>
          <dd>网站故障报告</dd>
          <dd>选机咨询</dd>
          <dd>投诉与建议</dd>
        </dl>
      </div>
      <div class="fuwu">
        <dl>
          <dt>服务热线</dt>
          <dd>400-023-4567</dd>
        </dl>
      </div>
    </div>
    <div class="line"></div>
    <div class="footerBottom">
      <p>© 2018 WWW.SHOPPING.COM</p>
    </div>
  </div>
</body>
<script src="./js/jquery.1.8.2.min.js"></script>
<script>
  $(".goodsCont .left .item").mouseover(function () {
    $(this).find(".name").show();
  })
  $(".goodsCont .left .item").mouseleave(function () {
    $(this).find(".name").hide();
  })
  var bool = false;
  $(".like .top .nav .cai").click(function () {
    $(".like .top .nav span").removeClass("active");
    $(this).addClass("active");
    $(".like .likeCont").show();
    $(".like .historyCont").hide();
    bool = false;
    if (bool) {
      $(".like .top .clear").show();
    } else {
      $(".like .top .clear").hide();
    }
  })
  $(".like .top .nav .history").click(function () {
    $(".like .top .nav span").removeClass("active");
    $(this).addClass("active");
    $(".like .likeCont").hide();
    $(".like .historyCont").show();
    bool = true;
    if (bool) {
      $(".like .top .clear").show();
    } else {
      $(".like .top .clear").hide();
    }
  })

  $(".pd-x_sort").click(function(){
    $(".rightCont").show();
    $(".contList").hide();
  })
  $(".pd-open ").click(function(){
    $(".rightCont").hide();
    $(".contList").show();
  })
</script>

</html>